<script setup lang="ts">
import { reactive, ref } from "vue";
import { FormInstance } from "element-plus";
import { message } from "@/utils/message";
import { addProperty } from "@/api/community";

const formData = reactive({
  id: null,
  name: "",
  phone: "",
  address: ""
});
const formRef = ref<FormInstance>(null);
const addPropertyFc = formRef => {
  if (!formRef) return;
  formRef.validate(() => {
    addProperty(formData).then(res => {
      message(res.msg, { type: "success" });
    });
  });
};
const rules = {
  name: [{ required: true, message: "物业名称不得为空", trigger: "blur" }],
  phone: [{ required: true, message: "物业联系方式不得为空", trigger: "blur" }],
  address: [{ required: true, message: "物业地址不得为空", trigger: "blur" }]
};
const resetForm = () => {
  formData.id = "";
  formData.name = "";
  formData.phone = "";
  formData.address = "";
};
</script>

<template>
  <div>
    <el-row justify="center" :gutter="12">
      <el-col :span="12">
        <el-form
          ref="formRef"
          label-position="top"
          label-width="auto"
          :model="formData"
          style="max-width: 600px"
          :rules="rules"
        >
          <el-form-item label="物业名称" prop="name">
            <el-input :validate-event="true" v-model="formData.name" />
          </el-form-item>
          <el-form-item label="联系方式" prop="phone">
            <el-input v-model="formData.phone" />
          </el-form-item>
          <el-form-item label="物业地址" prop="address">
            <el-input v-model="formData.address" />
          </el-form-item>
          <el-form-item>
            <div style="text-align: center">
              <el-button type="primary" @click="addPropertyFc(formRef)"
                >提交
              </el-button>
              <el-button @click="resetForm()">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss"></style>
